<script setup lang="ts">
import { computed, h } from 'vue';
import { TableColumnProps } from '../../utils';

defineOptions({
  name: 'UiTableColumn'
})

const props = defineProps<{
  column: TableColumnProps<any>
}>()

const standardColumn = computed(() => {
  const { children, _k, render, ...column } = props.column
  return column
})

const hasChild = computed(() => !!props.column.children?.length)

const UiRender = ({ render, params }
  : { render: (h: any, params: any) => any, params: any }) => {
  return params.$index > -1 && render(h, params)
}
</script>

<template>
  <ElTableColumn v-if="hasChild" v-bind="standardColumn">
    <UiTableColumn v-for="col in column.children" :key="col._k" :column="col" />
  </ElTableColumn>
  <ElTableColumn v-else v-bind="standardColumn">
    <template v-if="column.render" v-slot="params">
      <UiRender :render="column.render" :params="params" />
    </template>
  </ElTableColumn>
</template>
